<template>
  <div>
    <el-header class="nav">
      <div class="nav-logo">
        <img
          src="../assets/images/1668576557801.jpg"
          @click="$router.push('/')"
        />
      </div>
      <div class="nav-title">
        <ul class="nav-list">
          <li v-for="(item, i) in nav" :key="i">
            <span @click="jump(item.url)">{{item.name}}</span>
            <!-- 二级菜单 -->
            <div class="navTwo">

              <!-- 第一个二级导航 -->
              <div v-if="i < 2">
                <div class="nav-item" v-for="towItem in item.towLevel.extension" @click="jump(towItem.url)">
                  <img :src="towItem.img">
                  <p><b>{{towItem.t1}}</b></p>
                  <p>{{towItem.t2}}</p>
                  <p>{{towItem.t3}}</p>
                </div>
              </div>

              <!-- 第二个二级导航 -->
              <div v-if="i > 1 && i < 7">
                <div class="nav-item" v-for="towItem in item.towLevel.extension" @click="jump(towItem.url)">
                  <img :src="towItem.img">
                  <p><b>{{towItem.t1}}</b></p>
                  <p>{{towItem.t2}}</p>
                  <p>{{towItem.t3}}</p>
                </div>
                <div class="nav-list2">
                  <ul>
                    <li v-for="towList in item.towLevel.list" @click="jump(towList.url)">{{towList.name}}</li>
                  </ul>
                </div>
              </div>

              <!-- 第三个二级导航 -->
              <div v-if="i > 6">
                <div class="nav-item" @click="$router.push('/store/offline-stores')">
                  <img src="../assets/images/pc_stores_600x302.jpg">
                  <p><b>查找店铺</b></p>
                  <p>查找店铺</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div style="display: flex;">
        <!-- 搜索框 -->
        <div class="nav-search">
          <input
            v-model="searchName"
            type="text"
            placeholder="输入搜索词"
            @keyup.enter="jumpSearch"
          />
          <button @click="jumpSearch">
            <i class="el-icon-search"></i>
          </button>
        </div>

        <!-- 登录状态 -->
        <div style="color: #fff; display: flex; align-items: center; cursor: pointer;">
          <div v-if="user" @click="$router.push(`/account/personal-data`)">欢迎 {{user.uname}}</div>
          <div v-else @click="$router.push('/mylogin')">登录</div>
        </div>
      </div>
    </el-header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex2: '',
      searchName: '', // 搜索名称
      user: null, // 用户的登录状态

      // 二级导航样式
      // navTwoStyle: {
      //   transition: "0.3s",
      //   opacity: "1"
      // },
      // navTwoShow: false, // 控制二级导航是否显示

      // 导航，如果是对象名为towLevel则是二级导航
      nav: [
        // url 一级导航的跳转
        { 
          url: "", name: "新品推荐", towLevel: { 
            extension: [
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_pc_head_221118_01.jpg",
                // tn 文本
                t1: "黑魔杖唇膏", t2: "哑而不干 唯我独棕", t3: "立即探索",
                // 二级导航的跳转
                url: "/product/details/6"
              },
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_pc_head_221118_02.jpg",
                t1: "新年派对限定系列", t2: "梦幻派对 炫妆闪耀", t3: "立即探索",
                url: ""
              },
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_pc_head_220922_02.jpg",
                t1: "「绝绝紫」磨皮散粉", t2: "隐毛孔 瞬提亮 强锁妆", t3: "立即选购",
                url: ""
              },
            ],
            // 用于商品列表或商品详情的跳转
            list: []
          }
        },
        {
          url: "", name: "明星产品", towLevel: { 
            extension: [
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/navigation_touts_2020/mingxing-pc-0615-01.jpg",
                t1: "丝缎柔雾唇膏", t2: "雾般质感 轻薄持妆 轻松斩获目光", t3: "立即选购",
                url: "/product/details/5"
              },
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hpnav_pc_210918_02.jpg",
                t1: "全新水漾子弹头", t2: "玻尿酸上唇 丰唇立现 色泽亮丽效", t3: "立即选购",
                url: "/product/details/14"
              },
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/navigation_touts_2020/mingxing-pc-0615-03.jpg",
                t1: "无瑕粉底液", t2: "长效持妆 打造匀净奶油肌", t3: "立即选购",
                url: "/product/details/28"
              },
            ],
            list: []
          }
        },
        {
          url: "/product/lipsticks", name: "唇妆", towLevel: { 
            extension: [
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_pc_head_220922_01.jpg",
                t1: "小辣椒家族", t2: "热辣经典 定义王者", t3: "立即探索",
                url: ""
              }
            ],
            list: [
              // 此跳转会跳转到商品列表或商品详情
              { url: "/product/details/6", name: "黑魔杖唇膏" },
              { url: "/product/details/5", name: "丝缎柔雾唇膏" },
              { url: "/product/details/14", name: "全新水漾子弹头" },
              { url: "/product/details/26", name: "丝缎柔雾液体唇膏" },
              { url: "/product/details/18", name: "经典子弹头唇膏" },
              { url: "", name: "VIVA GLAM" },
              { url: "/product/lipsticks", name: "全部唇妆" }
            ]
          }
        },
        { 
          url: "/product/foundation-all", name: "底妆", towLevel: { 
            extension: [
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/navigation_touts_2020/mingxing-pc-0615-03.jpg",
                t1: "无瑕粉底液", t2: "无惧夏日炎炎 持久不脱妆", t3: "立即选购",
                url: "/product/details/28"
              }
            ],
            list: [
              // 此跳转会跳转到商品列表或商品详情
              { url: "", name: "粉底" },
              { url: "", name: "散粉/粉饼" },
              { url: "", name: "保湿控妆" },
              { url: "", name: "高光修容" },
              { url: "", name: "卸妆油" },
              { url: "", name: "遮瑕" },
              { url: "", name: "腮红" },
              { url: "/product/foundation-all", name: "全部底妆" }
            ]
          }
        },
        { 
          url: "/product/eye-makeup", name: "眼妆", towLevel: { 
            extension: [
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_pc_head_220811_02.jpg",
                t1: "玩色柔滑眼线胶笔", t2: "成膜锁色 防水防晕", t3: "立即探索",
                url: ""
              }
            ],
            list: [
              // 此跳转会跳转到商品列表或商品详情
              { url: "", name: "单色眼影" },
              { url: "", name: "眼影盘" },
              { url: "", name: "眉笔/眉胶" },
              { url: "", name: "眼线" },
              { url: "", name: "睫毛膏" },
              { url: "/product/eye-makeup", name: "全部眼妆" }
            ]
          }
        },
        { 
          url: "/product/brushes-all", name: "刷具", towLevel: { 
            extension: [
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/navigation_touts_2020/pc_allbrushes_600x302.jpg",
                t1: "全部刷具", t2: "大师级工艺 上妆更得力", t3: "即可选购",
                url: ""
              }
            ],
            list: [
              // 此跳转会跳转到商品列表或商品详情
              { url: "", name: "脸部刷具" },
              { url: "", name: "眼部刷具" },
              { url: "", name: "唇部刷具" },
              { url: "", name: "刷具清洁" },
              { url: "/product/eye-makeup", name: "更多彩妆工具" }
            ]
          }
        },
        { 
          url: "/product/skin", name: "护肤", towLevel: { 
            extension: [
              {
                img: "https://www.maccosmetics.com.cn/media/export/cms/navigation_touts_2020/hufu-pc-0615-01.jpg",
                t1: "亮泽焕采妆前乳", t2: "时刻闪耀光感肌肤", t3: "即可选购",
                url: ""
              }
            ],
            list: [
              // 此跳转会跳转到商品列表或商品详情
              { url: "", name: "面部妆前" },
              { url: "", name: "唇部妆前" },
              { url: "/product/eye-makeup", name: "全部护肤" }
            ]
          }
        },
        // { url: "", name: "pro" },
        { url: "/store/offline-stores", name: "线下门店" },
      ]
    }
  },
  methods: {
    // 跳转到搜索页
    jumpSearch() {
      // 如果不是空就搜索
      if (this.searchName != '') {
        // 防止重跳转报错
        if (this.$route.params.name != this.searchName) {
          // 跳转
          this.$router.push(`/search/${this.searchName}`)
        }
      }
    },
    // 用于导航栏的跳转
    jump(url) {
      console.log(url);
      console.log(this.$route);
      if(url != "") {
        this.$router.push(url);

      }
    }
  },
  mounted() {
    let user = sessionStorage.getItem("user");

    if(user) {
      this.user = JSON.parse(user);
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  position: fixed;
  background-color: black;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;


  .nav-logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .nav-title {
    display: flex;
    flex-direction: column;

    .nav-list {
      display: flex;
      align-items: center;
      color: #fff;
      height: 60px;
      z-index: 101;

      > li {
        margin: 0 10px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 60px;
        // cursor: pointer;
        user-select: none;
        // position: relative;

        &:hover {
          > .navTwo {
            width: 100%;
            transition: 0.2s;
            visibility: visible;
            opacity: 1;
            // position: absolute;
          }
        }
        // &::after  {
        //   content: "";
        //   z-index: 200;
        //   width: 0;
        //   height: 0;
        //   border: 20px solid transparent;
        //   border-bottom: #fff;
        //   position: absolute;
        //   bottom: 0;
        //   left: 50%;
        //   transform: translateX(-50%);
        // }

        > .navTwo {
          width: 100%;
          height: 300px;
          background: #fff;
          position: absolute;
          top: 60px;
          left: 0;
          align-items: center;                                                  
          justify-content: center;
          overflow: hidden;
          z-index: 100;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          visibility: hidden;
          opacity: 0;
          color: #000;
          
          > div {
            display: flex;
            justify-content: center;
            padding: 30px 0 0 0;
            margin: 0 10px;

            // > .navTwo-list {
            //   margin-right: 20px;
            //   padding-top: 30px;
            //   > div {
            //     > a {
            //       line-height: 20;
            //       display: block;
            //       margin: 10px;
            //     }
            //   }
            // }

            > .nav-item {
              width: 300px;
              margin: 0 20px;
              cursor: pointer;

              > img {
                width: 100%;
                height: 150px;
              }

              > p {
                line-height: 20px;
                margin-top: 10px;

                &:last-child {
                  margin-top: 20px;
                }
              }
            }

            > .nav-list2 {
              &:last-child {
                margin-left: 50px;
              }
              
              > ul {
                padding-bottom: 40px;
                width: 300px;
                height: 270px;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
  
                > li {
                  width: 150px;
                  color: #000;
                  line-height: 40px;
                  margin-right: 20px;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }

  .nav-search {
    margin-top: 20px;

    input {
      border: none;
      border-bottom: 1px solid #999;
      background-color: black;
      width: 150px;
      font-size: 12px;
      color: #fff;
      padding-left: 10px;
      outline: none;
    }
    button {
      border: none;
      background-color: transparent;
      width: 25px;
      height: 25px;
      margin-left: -10px;

      i {
        color: #999;
        font-weight: 500;
        margin-left: -15px;
      }
    }
  }
}
</style>
